<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { usePageScroll } from "@/hooks/scroll";
import { index_api } from "@/package/novice/api/new_guide_sachet";
import { Router } from "@/utils/router";

import NavBack from "@/components/nav/back.vue";
import IndexArticleItem from "./components/index-article-item.vue";

onLoad((options) => {
  index_api({ cate_id: options?.id }).then((resp) => {
    infoData.img_url = resp.header.img_url;
    infoData.title = resp.header.title;
    infoData.desc = resp.header.desc;
    articleList.value = resp.list.items;
  });
});

const infoData = reactive({
  img_url: "",
  title: "",
  desc: "",
  isExpand: false,
});

const articleList = ref<any[]>([]);
const articleClick = (id: string) => {
  Router.navigateTo(`/package/novice/pages/guide/detail?id=${id}`);
};
</script>

<template>
  <NavBack />

  <view class="index-cover">
    <image class="index-cover-img" :src="infoData.img_url" mode="aspectFill" />
    <view class="index-cover-title">{{ infoData.title }}</view>
  </view>
  <view class="index-intro">
    <image
      class="index-intro-icon"
      src="@/package/novice/static/guide-intro.png"
    />
    <view class="index-intro-wrapper">
      <view
        class="index-intro-content"
        :style="{ display: infoData.isExpand ? '' : '-webkit-box' }"
        @click="infoData.isExpand = !infoData.isExpand"
      >
        {{ infoData.desc }}
      </view>
      <view
        class="index-intro-expand"
        v-if="infoData.desc.length > 42 && !infoData.isExpand"
        @click="infoData.isExpand = true"
      >
        展开
      </view>
    </view>
  </view>

  <view class="index-article">
    <view class="index-article-title">{{ articleList.length }}篇知识</view>
    <view class="index-article-wrapper">
      <view
        class="index-article-item"
        v-for="i of articleList"
        :key="i.id"
        @click="articleClick(i.id)"
      >
        <IndexArticleItem :info="i" />
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.index-cover {
  position: relative;

  .index-cover-img {
    display: block;
    width: 100vw;
    height: 380rpx;
  }

  .index-cover-title {
    position: absolute;
    left: 30rpx;
    bottom: 74rpx;
    font-size: 36rpx;
    color: #ffffff;
    line-height: 50rpx;
    font-weight: bold;
  }
}

.index-intro {
  position: relative;
  padding: 40rpx 50rpx;
  margin: -54rpx 30rpx 48rpx;
  border-radius: 40rpx;
  background-color: #ffffff;
  box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.05);

  .index-intro-icon {
    position: absolute;
    left: 30rpx;
    top: 20rpx;
    width: 50rpx;
    height: 50rpx;
  }

  .index-intro-wrapper {
    position: relative;
  }

  .index-intro-content {
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
    // display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .index-intro-expand {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 2.2em;
    font-size: 26rpx;
    color: #ff7900;
    line-height: 40rpx;
    text-align: right;
    background-color: #ffffff;
  }
}

.index-article {
  .index-article-title {
    padding-left: 30rpx;
    margin-bottom: 8rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 44rpx;
    font-weight: bold;
  }

  .index-article-wrapper {
    padding-top: 20rpx;
    padding-bottom: 50rpx;
  }

  .index-article-item {
    margin: 0 30rpx 20rpx;
  }
}
</style>